<template>
  <div v-loading="loading">
    <!-- 新增按钮 -->
    <el-button type="primary" size="small" @click="addRole">新增角色</el-button>

    <!-- 表格 -->
    <el-table size="small" :data="RoleList" style="width: 100%" border stripe>
      <el-table-column align="center" label="序号" type="index" width="180" />
      <el-table-column align="center" label="角色" property="name" width="200" />
      <el-table-column align="center" label="描述" property="description" width="440" />
      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <el-button size="small" type="success" @click="assignPerm(row.id)">分配权限</el-button>
          <el-button size="small" type="primary" @click="editRole(row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="delRole(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background :page-sizes="[2,3,5,10]" :page-size="q.pagesize" layout="total,sizes, prev, pager, next,jumper" :total="q.total" @size-change="SizeChange" @current-change="pageChange" />
    <AddRloe ref="addRole" :show-dialog.sync="showDialog" :role-detail="roleDetail" @addRole="getRoleList" />
    <el-dialog title="分配权限" :visible="showPermDialog" @close="btnPermCancel">
      <!-- 权限是一颗树 -->
      <!-- 将数据绑定到组件上 -->
      <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
      <!-- id作为唯一标识 -->
      <el-tree
        ref="permTree"
        :data="permData"
        :props="defaultProps"
        :show-checkbox="true"
        :check-strictly="true"
        :default-expand-all="true"
        :default-checked-keys="selectCheck"
        node-key="id"
      />
      <!-- 确定 取消 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnPermOK">确定</el-button>
          <el-button size="small" @click="btnPermCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import AddRloe from './add-role.vue'
import { getRoleList, delRoleList, getRoleDetail, assignPerm } from '@/api/setting'
import { getPermissionList } from '@/api/permisson'
import { tranListToTreeData } from '@/utils'
export default {
  components: {
    AddRloe
  },
  data() {
    return {
      q: {
        page: 1, // 页码
        pagesize: 10, // 每页条数
        total: 0 // 记录总数
      },
      RoleList: [],
      showDialog: false,
      roleDetail: {},
      loading: false,
      showPermDialog: false, // 控制分配权限弹层的显示后者隐藏
      defaultProps: {
        label: 'name'
      },
      permData: [], // 专门用来接收权限数据 树形数据
      selectCheck: [], // 定义一个数组来接收 已经选中的节点
      roleId: null // 用来记录分配角色的id
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 获取角色
    async  getRoleList() {
      this.loading = true
      const { total, rows } = await getRoleList(this.q)
      this.q.total = total
      this.RoleList = rows
      await new Promise(resolve => setTimeout(() => resolve(), 500))
      this.loading = false
    },
    // 删除角色
    async delRole(id) {
      try {
        await this.$confirm('确认删除角色吗?')
        await delRoleList(id)
        this.$message.success('删除角色成功')
        // 如果当前页面的数据仅仅剩下1条，并且页码大于1，那么删除完成最后一条的时候，需要页码减一
        if (this.RoleList.length === 1 && this.q.page > 1) {
          this.q.page--
        }
        await this.getRoleList()
      } catch (err) {
        console.log(err)
      }
    },
    // 新增角色
    addRole() {
      this.showDialog = true
    },
    // 编辑角色
    async editRole(id) {
      this.$refs.addRole.getRoleDetail(id)
      this.showDialog = true
    },
    pageChange(newpage) {
      this.q.page = newpage
      this.getRoleList()
    },
    SizeChange(size) {
      this.q.pagesize = size
      this.getRoleList()
    },
    async assignPerm(id) {
      this.permData = tranListToTreeData(await getPermissionList(), '0')
      this.roleId = id
      // 应该去获取 这个id的 权限点
      // 有id 就可以 id应该先记录下来
      const { permIds } = await getRoleDetail(id) // permIds是当前角色所拥有的权限点数据
      this.selectCheck = permIds // 将当前角色所拥有的权限id赋值
      this.showPermDialog = true
    },
    async btnPermOK() {
      // 调用el-tree的方法
      // console.log(this.$refs.permTree.getCheckedKeys())
      await assignPerm({ permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId })
      this.$message.success('分配权限成功')
      this.showPermDialog = false
    },
    btnPermCancel() {
      this.selectCheck = [] // 重置数据
      this.showPermDialog = false
    }
  }

}
</script>

<style scoped>
.el-button {
  margin-bottom: 30px;
}

</style>
